<template>
    <div>
        <div class="shopCart">
            <Title :showLeft="false" :title="'购物车'"></Title>
            <div class="contentItem" v-for="item in shopCartList" :key="item.id">
                <ShopCartListVue :shopCartList="item" @changeNum="changeNum" @goToDetail="goToDetail" @delShopCart="delShopCart" />
            </div>
            <Loading :showLoading="false" :title="showLoading.title"></Loading>
        </div>
        <van-submit-bar :price="shopSum" @submit="settlement" button-text="结算">
            <van-checkbox v-model="checkAll" checked-color="#ee0a24" icon-size="25px">全选</van-checkbox>
        </van-submit-bar>
        <DockerVue :activeIcon="'shopCart'"></DockerVue>
    </div>
</template>

<script setup>
import DockerVue from '@/components/Docker.vue';
import ShopCartListVue from '@/views/shopCart/ShopCartList.vue';
import { Toast } from 'vant';
import { get, requestToDelete, put } from '@/utils/request';
import { useStore } from 'vuex';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import Loading from '@/components/Loading.vue';
import Title from '@/components/Title.vue';

// 遍历添加checked属性
function addChecked(arr) {
    arr.forEach(item => {
        item.checked = true;
    });
}

const store = useStore();
const router = useRouter();
let shopCartList = ref([]);
let showLoading = ref({ showLoading: false, title: '加载中...' });
let checkboxGroup = ref(null);

// 获取购物车列表方法
async function getShopCart() {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 1000
    });
    try {
        let shopCartData = await store.dispatch('shop/getShopCart', store.state.user.project_id);
        shopCartList.value = shopCartData.result;
        // 添加checked属性

        addChecked(shopCartList.value);
    } catch (error) {
        Toast.fail('加载失败');
    }

    // showLoading.value.showLoading = false;
}

(async () => {
    // 获取购物车列表
    getShopCart();
})();

// 全选按钮
const checkAll = computed({
    get() {
        let arr = shopCartList.value;
        let res = arr.every(ele => ele.checked == true);
        return res;
    },
    set(val) {
        shopCartList.value.forEach(ele => {
            ele.checked = val;
        });
    }
});

// 合计
const shopSum = computed(() => {
    let res = shopCartList.value.filter(ele => ele.checked === true);
    let sum = res.reduce((sum, item) => {
        return (sum += item.s_good.price * item.num * 100);
    }, 0);
    return sum;
});

// 左滑点击按钮删除操作
const delShopCart = async id => {
    // 删除购物车列表

    await requestToDelete('/shoppingCart/' + id);
    getShopCart();
};

// 点击商品图片跳转详情页
const goToDetail = id => {
    router.push('/merchants?id=' + id);
};

// 更改商品数量
const changeNum = async obj => {
    showLoading.value.title = '';
    showLoading.value.showLoading = true;
    await put(`/shoppingCart/${obj.id}`, { num: obj.num });
    showLoading.value.showLoading = false;
};

// 点击结算去结算页
const settlement = () => {
    let res = shopCartList.value.filter(ele => ele.checked === true);

    store.state.shop.filterToShopCartList = res;
    router.replace('/submitorder');
};
</script>

<style lang="scss" scoped>
.shopCart {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    background-color: #f5f5f5;
    overflow-y: auto;
    padding-bottom: 0.53rem;
}
.title {
    height: 0.64rem;
    line-height: 0.64rem;
    text-align: center;
    background-color: #fff;
    position: sticky;
    top: 0;
    p {
        font-size: 0.16rem;
    }
}

// 底部结算按钮样式覆盖
.van-submit-bar {
    bottom: 0.5rem;
}

.contentItem {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
